<script setup>
import {inject, onMounted, reactive, ref} from "vue";
import 'jiuqi-ui';
import {useDialog} from "jiuqi-ui";
import TreeToTableSelector from "../../components/TreeToTableSelector.vue";
import {Debounce} from "../../../../utils/debounce";

//================================================【组件通信】============================================================
//=======================================================【传入】
//父组件传递的数据
const props = defineProps({
    processType:{
        type:Number,
        required:true
    },
    selectedDimName:{
        type:String,
        required:true
    }
});
//发送请求组件
const context = inject('context')

//添加标签模态框  显示与隐藏
const labelAddVisible = inject('labelAddVisible')

//编辑模态框  显示与隐藏
const modifyLabelVisible = inject('modifyLabelVisible')

//维度项编辑模态框 显示与隐藏
const dimItemEditorVisiable = inject('dimItemEditorVisiable')

//维度项信息
//注意：如果写成这样对当前组件的dimItemArr修改，LabelModify组件中的dimItemArr不会同步进行修改，两者不是一个引用了
// const dimItemArr = reactive([])
// dimItemArr.splice(0,dimItemArr.length,...props.processType === 0 ?inject('addDimItemArr') : inject('modifyDimItemArr'))
const dimItemArr =props.processType === 0 ?inject('addDimItemArr') : inject('modifyDimItemArr')
//左选右结果
//注意，双向绑定中使用到的变量不能用const申明
let rightTableResultData = reactive([])
//================================================【公用相关】============================================================
//================================================【组件属性】============================================================
//================================================【普通方法】============================================================
//左侧 树形 模糊匹配
function fuzzyLeftMatch(searchWord,handleSearchResult) {
        //构建请求参数对象
        const requestItem = reactive({
            dimName: props.selectedDimName,
            searchKey:searchWord
        })
        Debounce( context.getPlugin('http').post(`labelmanager/dimension/member/fuzzyMatch`, requestItem).then((res) => {
          handleSearchResult(res.data)
        }),300)()
}
//==================================================================【树形相关】
//树形数据
const initTreeData = reactive([])
//获取维度项树形数据 (根节点)
function getTreeData(dimName) {
    //获取  指定维度 下的所有  维度项
    context.getPlugin('http').get(`labelmanager/dimension/member/byDimName/${dimName}`).then((res) => {
      initTreeData.splice(0,initTreeData.length,...res.data.children)
    })
}
//==================================================================【确认操作】
const dialogPop = useDialog()
const loading = ref(false)
function selectorConfirm() {
    if (loading.value) {
        return
    }

    loading.value = true


   //判断用户当前是否选择维度项信息
   if (rightTableResultData.length === 0) {
        dialogPop.warning({
            title: '操作异常',
            content: `未选择维度项`,
        });
        loading.value = false

    }else {
        dimItemArr.splice(0,dimItemArr.length,...rightTableResultData)
        loading.value = false
        props.processType === 0?labelAddVisible.value = true : modifyLabelVisible.value = true
        dimItemEditorVisiable.value = false;
    }
}

//==================================================================【取消操作】
function selectorCancel() {
    props.processType === 0?labelAddVisible.value = true : modifyLabelVisible.value = true
    dimItemEditorVisiable.value = false
}
//==================================================================【关闭选择模态框】
function getVisibleChange(info) {
    //当 维度项编辑模态框 关闭时
    if (info === false) {
        //标签添加模态框 需要保持显示
        props.processType === 0?labelAddVisible.value = true : modifyLabelVisible.value = true
    }
}
//================================================【生命周期】============================================================
onMounted(()=>{
  getTreeData(props.selectedDimName)
  rightTableResultData.splice(0,rightTableResultData.length,...dimItemArr)
})
</script>
<template>
    <j-modal
        v-model="dimItemEditorVisiable"
        title="选择基础数据项"
        :fullscreenable='false'
        :mask="false"
        :mask-closable="false"
        :closable="!loading"
        @visible-change="getVisibleChange"
    >
        <j-modal-content size="large">
           <TreeToTableSelector
               search-prompt-words="请输入编码或名称进行查询"
               left-component-title="可选基础数据项"
               right-component-title="已选基础数据项"
               :left-tree-init-data="initTreeData"
               v-model:rightTableResultData="rightTableResultData"
               @leftTreeFuzzyMatch="fuzzyLeftMatch">
           </TreeToTableSelector>
        </j-modal-content>
        <template #footer>
                <j-space style="justify-content: flex-end">
                    <j-button @click="selectorCancel" :disabled='loading'>取消</j-button>
                    <j-button type="primary" :loading='loading' @click="selectorConfirm">确定</j-button>
                </j-space>
        </template>
    </j-modal>
</template>

<style scoped>

</style>
